<template>
  <div class="app-container">
    <div class="index_top">
      <!--  入园人数统计    -->
      <div class="index_top_item">
        <div class="top_item_first">
          <div class="item_first">
            <div class="item_first_title">今日入园人数</div>
            <img class="item_first_img" src="../assets/images/提示.png">
          </div>
          <div class="item_first_num">6,560</div>
        </div>
        <div class="top_item_second">
          <div class="item_second_week">
            <div class="item_second_info">
              <div>周同比</div>
              <div style="margin-left: 5px">12%</div>
              <img class="item_second_img" src="../assets/images/上拉三角符号.png">
            </div>
          </div>
          <div class="item_second_day">
            <div class="item_second_info">
              <div>日环比</div>
              <div style="margin-left: 15px">11%</div>
              <img class="item_second_img" src="../assets/images/下拉三角符号.png">
            </div>
          </div>
        </div>
        <div class="top_item_third">
          <div>周均入园人数</div>
          <div>536</div>
        </div>
      </div>


      <!--   出园人数统计   -->
      <div class="index_top_item">
        <div class="top_item_first">
          <div class="item_first">
            <div class="item_first_title">今日出园人数</div>
            <img class="item_first_img" src="../assets/images/提示.png">
          </div>
          <div class="item_first_num">6,560</div>
        </div>
        <div class="top_item_second">
          <div class="item_second_week">
            <div class="item_second_info">
              <div>周同比</div>
              <div style="margin-left: 5px">12%</div>
              <img class="item_second_img" src="../assets/images/上拉三角符号.png">
            </div>
          </div>
          <div class="item_second_day">
            <div class="item_second_info">
              <div>日环比</div>
              <div style="margin-left: 15px">11%</div>
              <img class="item_second_img" src="../assets/images/下拉三角符号.png">
            </div>
          </div>
        </div>
        <div class="top_item_third">
          <div>周均出园人数</div>
          <div>536</div>
        </div>
      </div>

      <!--   园区访问量   -->
      <div class="index_top_item">
        <div class="top_item_first">
          <div class="item_first">
            <div class="item_first_title">园区访问量</div>
            <img class="item_first_img" src="../assets/images/提示.png">
          </div>
          <div class="item_first_num">6,560</div>
        </div>
        <div class="top_item_second">

          <div class="second_echart" id="wave-echart"></div>
        </div>
        <div class="top_item_third">
          <div>日访问量</div>
          <div>1,234</div>
        </div>
      </div>

      <!--   实时访问用户   -->
      <div class="index_top_next">
        <div class="top_next_first">
          <div class="next_first">
            <div class="next_first_title">实时访问用户</div>
          </div>
        </div>
        <div class="top_next_second">
          <el-carousel class="carouel_list" direction="vertical" :autoplay="true" :interval="3000">
            <el-carousel-item v-for="(item, index) in visitorList" :key="index">
              <div class="carouel_list_item">
                <div class="list_item_info">{{ item.visitName }}</div>
                <div class="list_item_time">{{ item.visitTime }}</div>
                <div class="list_item_matter">{{ item.visitMatter }}</div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="top_next_third">
          <router-link :to="'/visitor/visitor'" class="next_third_link">
            <el-button type="primary">查看全部</el-button>
          </router-link>
        </div>
      </div>
    </div>


    <div class="index_bottom">
      <!--  访问占比统计  -->
      <div class="index_bottom_item">
        <div class="index_bottom_first">
          <div class="bottom_first_title">访问占比统计</div>
          <div class="bottom_first_date">
            <div>今日</div>
            <div>本周</div>
            <div>本月</div>
            <div>全年</div>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        <div class="bottom_second">
          <div class="second_echart" id="main"></div>
        </div>
      </div>

      <!--   热门   -->
      <div class="next_bottom_item">
        <div class="next_bottom_first">
          <div class="next_first_title">热门受访人/部门</div>
        </div>
        <div class="next_bottom_second">
          <div class="bottom_second_list" v-for="(item,index) in popularList" :key="index">
            <div class="bottom_second_dept" @click="">{{ item.deptName }}</div>
            <div class="bottom_second_num">{{ item.num }}人</div>
          </div>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
import echarts from 'echarts'
import path from "path";
import {previewTable} from "../api/tool/gen";
import {parseTime} from "../utils/project";

export default {
  name: "index",
  data() {
    return {
      //访客信息列表
      visitorList: [
        {
          visitName: '李先生',
          visitTime: "",
          visitMatter: "拜访园区内张明"
        }, {
          visitName: '张先生',
          visitTime: '',
          visitMatter: "维修设备"
        },
        {
          visitName: '杜先生',
          visitTime: '',
          visitMatter: "参观园区"
        }, {
          visitName: '张先生',
          visitTime: '',
          visitMatter: "拜访园区内赵礼"
        }
      ],
      //日期选择
      value1: '',
      value2: '',
      //热门访问部门列表
      popularList: [
        {
          deptName: '研发部',
          num: 40
        },
        {
          deptName: '采购部',
          num: 40
        },
        {
          deptName: '市场部',
          num: 40
        },
        {
          deptName: '营销部',
          num: 40
        },
      ],
      //柱状图数据
      option: {
        // title: {
        //   text: 'ECharts 入门示例'
        // },
        tooltip: {},
        // legend: {
        //   data:['人数']
        // },
        itemStyle: {
          // 设置扇形的颜色
          color: '#1890FFD8',
        },
        emphasis: {
          itemStyle: {
            // 高亮时点的颜色
            color: 'rgb(123,192,255)'
          },
        },
        xAxis: {
          axisLine: {
            title: "2021年",
            lineStyle: {
              color: 'rgb(217,217,217)', // 设置x轴线的颜色
              type: 'solid' // 设置x轴线的类型
            }
          },
          axisLabel: {
            color: '#000000',
          },
          data: ["10月", "11月", "12月", "2021/01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月"]
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: 'rgb(217,217,217)', // 设置网格线颜色
              width: 1, // 设置网格线宽度
              type: 'dashed' //设置线的类型 虚线(dashed)、实线(solid)
            },
            show: true
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#000000',
          },
        },
        series: [{
          name: '人数',
          type: 'bar',
          data: [300, 780, 999, 550, 200, 510, 260, 310, 760, 510, 260, 360]
        }],

      },
      //折线统计图数据
      option_item: {
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          show: false,
          data: ["10月", "11月", "12月", "01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月"]
        },
        yAxis: {
          type: "value",
          show: false,
          splitLine: {show: false}, //去除网格线
        },
        series: [
          {
            data: [300, 780, 999, 550, 200, 510, 260, 310, 760, 510, 260, 360],
            type: "line",
            smooth: true,
            areaStyle: {},
            symbolSize: 0,
          }
        ],
        itemStyle: {
          color: 'rgb(151,95,228)',
          width: 1,

        },
      }
    };
  },
  created() {
    //获取当前时间
    let date = new Date();
    //循环赋值
    for (let i in this.visitorList) {
      //生成9-18随机整数
      let hour = Math.round(Math.random() * (17 - 9)) + 9
      //生成0-59随机整数
      let minutes = Math.round(Math.random() * 59)
      //判断是否在当前时间范围内
      if (hour < date.getHours() && minutes < date.getMinutes()) {
        let newTime = new Date(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + hour + ":" + minutes)
        this.visitorList[i].visitTime = parseTime(newTime)
      } else {
        let newTime = new Date(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + hour + ":" + minutes)
        this.visitorList[i].visitTime = parseTime(newTime.getTime() - (24 * 60 * 60 * 1000))
      }
    }
  },
  mounted() {
    //初始化柱状图
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(this.option);
    //初始化折线图
    var myChart_item = echarts.init(document.getElementById('wave-echart'));
    myChart_item.setOption(this.option_item);
  },
  methods: {},
};
</script>
<style scoped lang="scss">
.app-container {
  margin: 0px;
  background-color: rgba(244, 244, 244, 1);
  background-image: none;
  position: relative;
  left: 0px;
  width: 100%;
  height: 91vh;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.index_top {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.index_top_item {
  border-width: 0px;
  left: 20px;
  top: 33px;
  width: 25%;
  height: 188px;
  display: flex;
  font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: white;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 5px;
  float: left;
}

.index_top_next {
  border-width: 0px;
  left: 20px;
  top: 33px;
  width: 18%;
  height: 188px;
  display: flex;
  font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: white;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 5px;
  float: left;
}

.top_item_first {
  width: 90%;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item_first {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item_first_title {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.447058823529412);
}

.item_first_num {
  font-size: 30px;
  width: 100%;
}

.item_first_img {
  width: 14px;
  height: 14px;
}

.top_item_second {
  width: 90%;
  height: 40%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.item_second_info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.item_second_img {
  width: 13px;
  height: 10px;
  margin-left: 4px;
}

.top_item_third {
  width: 90%;
  height: 15%;
  border-top: 1px solid rgba(244, 244, 244, 1);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
}

.top_item_third div {
  margin-right: 15px;
}

.top_next_first {
  width: 90%;
  height: 20%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.next_first_title {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.447058823529412);
}

.top_next_second {
  width: 90%;
  height: 40%;
  display: block;
  justify-content: flex-start;
  align-items: center;
}

.next_second_info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.top_next_third {
  width: 90%;
  height: 35%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

.el-carousel__item {

  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 40px;
  margin: 0;
}

.carouel_list {
  width: 100%;
  height: 90%;
}

.carouel_list_item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;

}

.list_item_info {
  width: 30%;
  font-size: 14px;
  font-family: "Microsoft YaHei ", "Microsoft YaHei", sans-serif;
  color: black;
}

.list_item_matter {
  width: 100%;
  font-size: 14px;
  font-family: "Microsoft YaHei ", "Microsoft YaHei", sans-serif;
  color: black;
}

.list_item_time {
  width: 70%;
  display: flex;
  justify-content: flex-end;
}

.index_bottom {
  width: 100%;
  margin-top: 50px;
  height: 336px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.index_bottom_item {
  border-width: 0px;
  left: 20px;
  width: 79.5%;
  height: 336px;
  display: flex;
  font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: white;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  float: left;
}

.index_bottom_first {
  width: 95%;
  height: 15%;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.bottom_first_date {
  width: 45%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.bottom_second {
  width: 95%;
  height: 85%;
  border-top: 1px solid #b4bccc;
}

.next_bottom_item {
  border-width: 0px;
  left: 20px;
  width: 18%;
  height: 336px;
  display: flex;
  font-family: 'Microsoft YaHei ', 'Microsoft YaHei', sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: white;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 5px;
  float: left;
}

.next_bottom_first {
  width: 85%;
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.next_first_title {
  font-size: 16px;
  color: black;
}

.next_bottom_second {
  width: 90%;
  height: 85%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
}

.bottom_second_list {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom_second_dept {
  color: #1890FF;
}

.second_echart {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.next_third_link {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.next_third_link button {
  width: 80%;
}

element.style {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 75px;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  padding: 0px;
  margin: 0px;
  border-width: 0px;
}
</style>

